<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { articleClassficationGetService, articleClassficationDelServe } from '@/api/article'
import ComfirmBase from '@/components/ComfirmBase.vue'

const comfirm = ref() // 获取整个对话框组件对象，用于调用对话框组件暴露的方法来激活对话框组件
// 初始化用户的文章分类数据
const isLoading = ref(true) // 表格是否处于加载状态
const articleList = ref() // 存储请求回来的文章列表数据
// 获取文章列表
const getArtList = async () => {
  isLoading.value = true
  const res = await articleClassficationGetService()
  isLoading.value = false
  articleList.value = res.data
  // console.log(res.data)
}
getArtList()
// 文章分类编辑
const editItem = (row) => {
  comfirm.value.open(row)
  // console.log(row)
}
// 添加文章分类
const addArticleClassfication = async (row) => {
  comfirm.value.open()
}
// 修改成功后重新获取页面
const closeDialog = () => {
  getArtList()
}
// 删除文章分类
const delItem = async (id) => {
  await ElMessageBox.confirm('你确认要删除吗')
  await articleClassficationDelServe(id)
  ElMessage.success('删除成功')
  getArtList()
}
</script>

<template>
  <el-card class="big_card">
    <template #header>
      <div class="card-header">
        <span>文章分类</span>
        <el-button type="primary" @click="addArticleClassfication">添加分类</el-button>
      </div>
    </template>
    <slot>
      <el-table :data="articleList" v-loading="isLoading">
        <el-table-column label="序号" type="index" width="100"></el-table-column>
        <el-table-column label="分类名称" prop="cate_name"></el-table-column>
        <el-table-column label="分类别名" prop="cate_alias"></el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button
              type="primary"
              :icon="Edit"
              circle
              plain
              @click="editItem(row)"
            ></el-button>
            <el-button
              type="danger" 
              :icon="Delete" 
              circle
              plain
              @click="delItem(row.id)"
            ></el-button>
          </template>
        </el-table-column>

        <template #empty>
          <el-empty description="无数据" />
        </template>
      </el-table>
    </slot>
    <template #footer>Footer content</template>
    
    <ComfirmBase ref="comfirm" @submitSuccess="closeDialog"></ComfirmBase>
  </el-card>
</template>

<style lang="scss" scoped>
.big_card {
  min-height:100%;
  .card-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
}
</style>